<!-- 多选题 -->

<template>
  <div class="flex1">
    <OurTitle v-bind="$props" />

    <draggable v-model="obj.optionList" :animation="200">
      <div v-for="(option, i) in obj.optionList" :key="option.key" class="QuestionnaireList-flex">
        <div style="width: 40px">
          <el-checkbox :value="false" disabled>{{ option.label }}</el-checkbox>
        </div>
        <div v-if="!isShow">
          <BtnText :title="CORE.MAP.TIP_DEL" :disabled="obj.optionList.length === 1" red @click="toDel(i)" />
        </div>

        <FormImage :one="option" :square="36" folder="questionnaire" text="" flex0 />
        <FormTextarea :one="option" bind="content" :rows="[1, 5]" tip="图片和描述，不能同时为空" noCount />

        <div class="flex0">关联</div>
        <FormSelectMulti
          :one="option"
          :dict="relatedDict"
          :tip="`选中 ${option.label} 时，显示的问题`"
          :width="220"
          flex0
        />
      </div>
    </draggable>

    <div class="QuestionnaireList-flex">
      <div style="width: 40px">
        <el-checkbox v-if="hasAdd" :value="false" disabled />
      </div>
      <div v-if="!isShow" style="width: 88px">
        <BtnText v-if="hasAdd" :title="CORE.MAP.TIP_ADD" :disabled="isShow" @click="toAdd" />
      </div>

      <div class="QuestionnaireList-remark">底部备注</div>
      <OurRemark v-bind="$props" />

      <div>项数</div>
      <FormSliderRange
        :key="obj.optionList.length"
        :one="obj"
        bind="min, max"
        :min="1"
        :max="obj.optionList.length || 1"
        :marks="marks"
        :width="220"
      />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyRadio from '../MyRadio'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyRadio, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyCheckbox',
})
</script>
